// 二次封装样式
.white_slider {
  width: 100%;

  .ant-slider {
    margin: .7rem .42rem;

    .ant-slider-rail {
      height: 0.5rem;
      border-radius: 0;
      background-color: rgba(255, 255, 255, 0.3);
    }

    .ant-slider-track {
      height: 0.5rem;
      border-radius: 0;
      background-color: #ddd;
    }

    .ant-slider-handle {
      width: 1.5rem;
      height: 0.7rem;
      margin: 0;
      border: 0;
      border-radius: 0;
      top: .22em;
      box-shadow: 0 0 5px 1px #fff;
      border-radius: 1px;
    }

    &:hover {
      .ant-slider-rail {
        background-color: rgba(255, 255, 255, 0.3);
      }

      .ant-slider-track {
        background-color: #eee;
      }
    }

    // 垂直
    &.ant-slider-vertical {
      display: flex;
      justify-content: center;
      align-items: center;

      .ant-slider-rail {
        width: 0.3rem;
        height: 100%;
      }

      .ant-slider-track {
        width: 0.3rem;
      }

      .ant-slider-handle {
        top: unset;
        left: calc(50% - 0.25rem);
        width: 0.5rem;
        height: 0.7rem;
      }
    }

  }
}
